﻿@using PYNET.Models
@using Microsoft.AspNetCore.Identity

@inject SignInManager<User> SignInManager
@inject UserManager<User> UserManager
@model MyAccountViewModel
@{
    ViewData["Title"] = "我的账户";
}
@section PYhead{
    <link href="~/css/Account.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="~/css/jquery.Jcrop.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
    <style>
        .itm-son-r {
            color: black;
        }
    </style>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

}
<div class="uc-topbar">
    <a asp-action="Index" asp-controller="Home"><p class="top-item" style="float:left;position:absolute;left: 15px; width: 100px;z-index: 999;cursor:pointer;color: black;">首页</p></a>
    <p class="top-item" style="z-index: 0;">用户中心</p>
    <partial name="_LoginPartical" />
</div>
<div class="colorful"></div>
<div class="main-area">
    <div class="bookmark">
        <ul class="usr-bar">
            <li class="usr-bar-son">个人资料</li>
            <li class="usr-bar-son">回帖记录</li>
            <li class="usr-bar-son">登出注销</li>
        </ul>
    </div>
    <div id="personal-data" class="sub-board">
        <img src="/Account/GetUserHead/@UserManager.GetUserId(User)" class="usr-img">

        <br />
        <button class="usrsubmit" data-toggle="modal" data-target="#myModal">头像</button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div style="width: 200px;">
                            <img id="cut-img" class="thumbnail" style="width: 300px;height:300px;" src="/Account/GetUserHead/@UserManager.GetUserId(User)"><br />
                        </div>
                        <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /><br />
                        <p>1、图片格式需要jpg、gif、png为后缀名.</p>
                        <p>2、图片可以在线裁剪大小,以裁剪后为最终结果.</p>
                        <p>3、图片上传完毕即可关闭窗口.</p>
                    </div>
                </div>
            </div>
        </div>
        <form class="change" asp-action="ChangeUserName" asp-controller="Account" method="post">
            <div asp-validation-summary="All"></div>
            <input type="hidden" asp-for="OldPassword" value="[Aa123456" />
            <input type="hidden" asp-for="Password" value="[Aa1234567" />
            <input type="hidden" asp-for="ConfirmPassword" value="[Aa1234567" />
            <label for="newusername" class="page_label">更换用户名</label>
            <input type="text" asp-for="UserName" id="newusername" name="UserName" class="usr-change" placeholder="请输入新用户名">
            <input type="submit" class="usrsubmit" value="提交">
        </form>
        <form class="change" asp-action="ChangeUserPassword" asp-controller="Account" method="post">
            <div asp-validation-summary="All"></div>
            <label for="psw" class="page_label">更改密码</label>
            <input type="password" asp-for="OldPassword" class="usr-change" placeholder="请输入旧密码" />
            <input type="password" asp-for="Password" id="psw" name="Password" class="usr-change" placeholder="请输入新密码">
            <input type="password" asp-for="ConfirmPassword" id="reinpitpsw" name="ConfirmPassword" class="usr-change" placeholder="请重新输入新密码">
            <input type="hidden" asp-for="UserName" value="TMPNAME" />
            <input type="submit" class="usrsubmit" value="提交">
        </form>
    </div>
    <div id="post-history" class="sub-board" style="display: none;">
        <div class="ph-con">
            @foreach (var u in Model.comments)
            {
                <div class="ph-con-son">
                    <a>@u.AId</a>
                    <p class="comm">@u.Content</p>
                </div>
            }
        </div>
    </div>
    <div id="lgout" class="sub-board" style="display: none;">
        <form>
            <button asp-action="Logout" asp-controller="Account" class="usrsubmit" style="margin-top:150px;">登出</button>
        </form>
        <form asp-action="UserSelfDelete" asp-controller="Account" method="post">
            <input type="submit" value="删除账户(谨慎操作)" class="usrsubmit">
        </form>
    </div>
</div>

@section scripts{
    <script src="~/js/jquery.Jcrop.min.js"></script>
    <script src="~/lib/bootstrap-fileinput/fileinput.js"></script>
    <script src="~/lib/bootstrap-fileinput/locales/zh.js"></script>
    <script src="~/js/jquery-ui.min.js"></script>
    <script type="text/javascript">

        //http://code.ciaoca.com/jquery/jcrop/
        //http://code.ciaoca.com/jquery/jcrop/demo/animation
        //http://plugins.krajee.com/file-input
        //http://plugins.krajee.com/file-advanced-usage-demo#advanced-example-5

        var tailorInfo = "";

        //初始化fileinput
        function FileInput() {
            var oFile = new Object();

            oFile.Init = function (ctrlName, uploadUrl) {
                var control = $('#' + ctrlName);
                //初始化上传控件的样式
                control.fileinput({
                    language: 'zh', //设置语言
                    browseLabel: '选择',
                    browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
                    browseClass: "btn btn-primary", //按钮样式
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['jpg', 'png'],//接收的文件后缀
                    showUpload: true, //是否显示上传按钮
                    showCaption: false,//是否显示标题
                    showPreview: false,//隐藏预览
                    dropZoneEnabled: false,//是否显示拖拽区域
                    uploadAsync: true,//采用异步
                    autoReplace: true,
                    //minImageWidth: 50,
                    //minImageHeight: 50,
                    //maxImageWidth: 1000,
                    //maxImageHeight: 1000,
                    //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                    //minFileCount: 0,
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    uploadExtraData: function () {
                        return { "tailorInfo": tailorInfo }
                    }
                });
            }

            return oFile;
        };

        function PageInit() {
            var jcorp = null;
            var _this = this;
            var fileInput = new FileInput();
            fileInput.Init("txt_file", "@Url.Action("UpLoadFile")");
            var input = $('#txt_file');

            //图片上传完成后
            input.on("fileuploaded", function (event, data, previewId, index) {
                if (data.response.success) {
                    jcorp.destroy();

                    $('#cut-img').attr('src', data.response.newImage);//Data URI Scheme形式
                    //$('#cut-img').attr('src', data.response.newImage + "?t=" + Math.random());//加尾巴解决缓存问题
                }
                alert(data.response.message);
            });

            //选择图片后触发
            input.on('change', function (event, data, previewId, index) {
                var img = $('#cut-img');
                if (input[0].files && input[0].files[0]) {
                    var reader = new FileReader();
                    reader.readAsDataURL(input[0].files[0]);
                    reader.onload = function (e) {
                        img.removeAttr('src');
                        img.attr('src', e.target.result);
                        img.Jcrop({
                            setSelect: [0, 0, 260, 290],
                            handleSize: 10,
                            aspectRatio: 1,//选框宽高比
                            bgFade: false,
                            bgColor: 'black',
                            bgOpacity: 0.3,
                            onSelect: updateCords
                        }, function () {
                            jcorp = this;
                        });
                    };
                    if (jcorp != undefined) {
                        jcorp.destroy();
                    }
                }
                function updateCords(obj) {
                    tailorInfo = JSON.stringify({ "PictureWidth": $('.jcrop-holder').css('width'), "PictureHeight": $('.jcrop-holder').css('height'), "CoordinateX": obj.x, "CoordinateY": obj.y, "CoordinateWidth": obj.w, "CoordinateHeight": obj.h });
                    console.log(tailorInfo);
                }
            });

            //上传出现错误
            input.on('fileuploaderror', function (event, data, msg) {
                alert(msg);

                //jcorp.destroy();
                //$('#cut-img').attr('src', '/Content/defaultAvatar.jpg');
                return false;
            });

            //移除图片
            input.on('fileclear', function (event) {
                console.log("fileclear");

                jcorp.destroy();
                $('#cut-img').attr('src', '/Content/defaultAvatar.jpg');
            });
        };

        $(function () {
            PageInit();
        });

        $('.comm').each(
            function () {
                var s = $(this).html();
                s = s.replace(/\[b\]/g, "<b>");
                s = s.replace(/\[\/b\]/g, "</b>");
                s = s.replace(/\[strike\]/g, "<strike>");
                s = s.replace(/\[\/strike\]/g, "</strike>");
                s = s.replace(/\[u\]/g, "<u>");
                s = s.replace(/\[\/u\]/g, "</u>");
                s = s.replace(/\[i\]/g, "<i>");
                s = s.replace(/\[\/i\]/g, "</i>");
                s = s.replace(/\[div\]/g, "<div>");
                s = s.replace(/\[\/div\]/g, "</div>");
                s = s.replace(/\[br\]/g, "<br>");
                s = s.replace(/\[\/br\]/g, "</br>");
                s = s.replace(/\[space\]/g, "&nbsp;");
                $(this).html(s);
            }
        );
    </script>
    <script>
        $(document).ready(function () {
            $(".usr-bar-son").eq(0).addClass("colora");
        });
        $(document).ready(function () {
            $("#upfile").on("change", function () {
                var filePath = $(this).val();
                filePath = filePath.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1");
                $(".file").html(filePath);
            })
        });
        $(document).ready(function () {
            $(".usr-bar-son").click(function () {
                var index = $(this).index();
                if (index == 0) {
                    $("#personal-data").css("display", "block");
                    $("#post-history").css("display", "none");
                    $("#lgout").css("display", "none");
                    $(".usr-bar-son").eq(index).addClass("colora");
                    $(".usr-bar-son").eq(1).removeClass("colorb");
                    $(".usr-bar-son").eq(2).removeClass("colorc");
                    $(".colorful").animate({
                        backgroundColor: "#00ffbc"
                    }, 100);
                } else if (index == 1) {
                    $("#personal-data").css("display", "none");
                    $("#post-history").css("display", "block");
                    $("#lgout").css("display", "none");
                    $(".usr-bar-son").eq(index).addClass("colorb");
                    $(".usr-bar-son").eq(0).removeClass("colora");
                    $(".usr-bar-son").eq(2).removeClass("colorc");
                    $(".colorful").animate({
                        backgroundColor: "#00ff08"
                    }, 100);
                } else {
                    $("#personal-data").css("display", "none");
                    $("#post-history").css("display", "none");
                    $("#lgout").css("display", "block");
                    $(".usr-bar-son").eq(index).addClass("colorc");
                    $(".usr-bar-son").eq(0).removeClass("colora");
                    $(".usr-bar-son").eq(1).removeClass("colorb");
                    $(".colorful").animate({
                        backgroundColor: "#00f7ed"
                    }, 100);
                }
            });
        })
        $(document).ready(function () {
            $(".usr-bar-son").hover(function () {
                var index = $(this).index();
                if (index == 0) {
                    $(".usr-bar-son").eq(index).css("color", "#00ffbc");
                    $(".usr-bar-son").eq(index).css("border-bottom", "2px solid #00ffbc");
                } else if (index == 1) {
                    $(".usr-bar-son").eq(index).css("color", "#00ff08");
                    $(".usr-bar-son").eq(index).css("border-bottom", "2px solid #00ff08");
                } else {
                    $(".usr-bar-son").eq(index).css("color", "#00f7ed");
                    $(".usr-bar-son").eq(index).css("border-bottom", "2px solid #00f7ed");
                }

            }, function () {
                var index = $(this).index();
                if (index == 0) {
                    $(".usr-bar-son").eq(index).css("color", "");
                    $(".usr-bar-son").eq(index).css("border-bottom", "");
                } else if (index == 1) {
                    $(".usr-bar-son").eq(index).css("color", "");
                    $(".usr-bar-son").eq(index).css("border-bottom", "");
                } else {
                    $(".usr-bar-son").eq(index).css("color", "");
                    $(".usr-bar-son").eq(index).css("border-bottom", "");
                }
            });
        })
    </script>
}